<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 100px;
        width: 200px;
      }
      #d1 {
        background-color: red;
      }
      #d2 {
        background-color: green;
        /* 定位方式 static静态流式不能设置位置;relative相对流式可以设置位置,top bottom left right 距离原来位置移动 */
        position: relative;
        bottom: 20px;
        left: 20px;
      }
      #d3 {
        background-color: yellow;
      }
      .pink {
        width: 80px;
        height: 80px;
      }
      #container {
        margin-top: 10px;
        background-color: yellowgreen;
        width: 500px;
        position: relative;
      }
      #d4 {
        background-color: aquamarine;
        /* absolute绝对定位,父元素文档流中没有其位置 top...进行定位
        * 先查看自己父元素position是否为static,向上寻找直到根目录。
        */
        position: absolute;
        top: 20px;
        left: 20px;
      }
      #d5 {
        background-color: pink;
      }
      #d6 {
        width: 300px;
        height: 200px;
        background-color: burlywood;
        /* fixed 固定定位 脱离文档流 top...
        *相对于根
        *且不跟随滚动
        *固定后margin失效
        */
        position: fixed;
      }
      /* 
      *relative:微调使用
      *absolute:相对上层移动时使用
      *fixed:不跟随滚动时使用
      */
    </style>
  </head>
  <body>
    <div id="d1" class="box"></div>
    <div id="d2" class="box"></div>
    <div id="d3" class="box"></div>
    <div id="container">
      <div id="d4" class="pink"></div>
      <div id="d5" class="box"></div>
      <div id="d6"></div>
    </div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
    <div>123</div>
  </body>
</html>
